<#import "../tpl/pageTep.ftl" as page>
<@page.pageBase currentMenu="活动管理">
<style>
    .button-large {
        font-size: 16px;
    }

    hr {
        border-color: #009688;
    }

    .control-group {
        width: 1000px;
    }

    .webuploader-pick {
        background: none;
        padding: 0;
    }
</style>
<div class="xm-offline">
    <div class="row">
        <div class="panel">
            <div class="panel-header">
                <a href="${basepath}/rest/manage/activity/toList">返回上一级</a>
            </div>
            <div class="panel-body">
            <#--form表单提交，相当于data-->
                <form id="addForm" class="form-horizontal" action="${basepath}/rest/manage/activity/insertJson"
                      method="post">
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            活动名称：
                        </label>

                        <div class="controls">
                            <input type="text" class="control-text span-width span5"
                                   name="name" placeholder="请输入活动名称" data-rules="{required:true}">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label"> <s>*</s>活动门店：</label>
                        <div id="p-catalog" class="controls">
                            <input type="hidden" class="input-normal control-text" name="storeID" value="" id="p-value"
                                   data-rules="{required : true}">
                        </div>
                    </div>
                    <div class=" control-group">
                        <label class="control-label">
                            <s>*</s>
                            详细地址：
                        </label>

                        <div class="controls">
                            <input type="text" class="control-text span-width span5"
                                   name="address" placeholder="请输入详细地址" data-rules="{required:true}">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            活动介绍：
                        </label>
                        <div class="controls  control-row-auto mar0">
                            <textarea data-rules="{required:true}" class="span10 " name="introduce" placeholder="请输入内容"
                                      aria-disabled="false" aria-pressed="false"></textarea>
                        </div>
                    </div>
                    <h3 class="offset2">宣传图片
                        <a class="button button-primary pull-right" id="imagesBtn" style="height:20px">上传图片</a>
                    </h3>
                    <hr>
                    <input type="hidden" class="control-text span-width " name="picture" id="picture"
                           data-rules="{required:true}" data-messages="{required:'图片不能为空'}">

                    <div id="imagesGrid" class="xm-grid">

                    </div>
                    <div class=" control-group">
                        <label class="control-label">
                            <s>*</s>
                            开始日期：
                        </label>
                        <div class="time-controls controls">
                            <input name="startDate" class=" calendar bui-form-field-date startDate bui-form-field span5"
                                   type="text" aria-disabled="false" aria-pressed="false"  data-rules="{required:true}">
                        </div>
                    </div>
                    <div class=" control-group">
                        <label class="control-label">
                            <s>*</s>
                            结束日期：
                        </label>
                        <div class="time-controls controls">
                            <input name="endDate" class=" calendar bui-form-field-date endDate bui-form-field span5" type="text"
                                   aria-disabled="false" aria-pressed="false"  data-rules="{required:true}">
                        </div>
                    </div>
                    <div class=" control-group">
                        <label class="control-label">
                            活动开始时间：
                        </label>
                        <div class="time-controls controls">
                            <input name="startTime" class=" bui-form-field-date startTime bui-form-field span5" type="time"
                                   aria-disabled="false" aria-pressed="false"  data-rules="{required:true}">
                        </div>
                    </div>
                    <div class=" control-group">
                        <label class="control-label">
                            活动结束时间：
                        </label>
                        <div class="time-controls controls">
                            <input name="endTime" class=" bui-form-field-date endTime bui-form-field span5" type="time"
                                   aria-disabled="false" aria-pressed="false"  data-rules="{required:true}">
                        </div>
                    </div>
                    <div class=" control-group">
                        <label class="control-label">
                            报名费用：
                        </label>
                        <div class="controls">
                            <input type="number" class="control-text span-width span5"
                                   name="charge" placeholder="请填写报名费用">
                        </div>
                    </div>
                    <div class=" control-group">
                        <label class="control-label">
                            标题1名称：
                        </label>
                        <div class="controls">
                            <input type="text" class="control-text span-width span5"
                                   name="titleOne" placeholder="请填写标题1名称" data-rules="{required:true}">
                        </div>
                    </div>
                    <div class=" control-group">
                        <label class="control-label">
                            标题2名称：
                        </label>
                        <div class="controls">
                            <input type="text" class="control-text span-width span5"
                                   name="titleTwo" placeholder="请填写标题2名称" data-rules="{required:true}">
                        </div>
                    </div>
                    <div class="centered">
                        <a id="saveBtn"  class="button  button-large  button-success">保存</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    var editor = UE.getEditor('content');
    var Grid = BUI.Grid;
    var Select = BUI.Select;
    var Store = BUI.Data.Store;
    var Data = BUI.Data;
    var Calendar = BUI.Calendar;
    var datePicker = new Calendar.DatePicker({
        trigger: '.calendar-time',
        showTime: true,
        autoRender: true
    });
    var addForm = new BUI.Form.Form({
        srcNode: '#addForm',
        submitType: 'ajax',
        callback: function (data) {
            if (data.success == true) {
                window.location.href = "${basepath}/rest/manage/activity/toList"
            } else {
                BUI.Message.Alert(data.message, 'error');
                return;
            }
        }
    }).render();
    //点击保存按钮，判断
    $("#saveBtn").click(function () {
        var startTime = $(".startTime").val(),
             endTime = $(".endTime").val(),
             startDate=$('.startDate').val(),
             endDate=$('.endDate').val();
        var now=new Date();
        if (addForm.isValid()) {
            if( Date.parse(startDate)< Date.parse(now)){
                $('.startDate').val('');
                BUI.Message.Alert('请选择合适的开始日期', function () {
                }, 'info');
            }else if (startDate>endDate) {
                $('.endDate').val('');
                BUI.Message.Alert('结束日期要大于开始日期', function () {
                }, 'info');
            }else if(startTime > endTime){
                $('.endTime').val('');
                BUI.Message.Alert('结束时间要大于开始时间', function () {
                }, 'info');
            }else {
                addForm.ajaxSubmit();
            }
        } else {
            addForm.valid();
        }
    });
    /*--------------------------活动图片列表  begin--------------------*/
    /**
     * 图片信息
     * @type {*[]}
     */
    var imagesColumns = [
        {
            title: '序号', elCls: 'center', width: '30%', renderer: function (value, data, index) {
                return (index + 1);
            }
        },
        {
            title: '图片', dataIndex: 'url', elCls: 'center', width: '30%', renderer: function (data) {
                return '<img src="${basepath}/' + data + '" width="100px" height="100px"/>'
            }
        },
        {
            title: '编辑', dataIndex: 'title', elCls: 'center', width: '40%', renderer: function (data, obj, index) {
                return '<a href="javascript:delImages(' + index + ')">删除</a>';
            }
        }
    ];

    /**
     * 删除缓存图片信息
     * @param index
     */
    function delImages(index) {
        BUI.Message.Confirm('确认要删除吗？', function () {
            var record = imagesStore.findByIndex(index);
            imagesStore.remove(record);
            var imgStr = imagesStore.getResult();
            var imgArr = new Array();
            for (var i = 0; i < imgStr.length; i++) {
                imgArr[i] = imgStr[i].url
            }
            $("#picture").val(imgArr.join(","));
        }, 'question');
    }

    var imagesStore = new Store({});
    var imagesGrid = new Grid.Grid({
        render: '#imagesGrid',
        width: '100%',//如果表格使用百分比，这个属性一定要设置
        columns: imagesColumns,
        idField: 'title',
        store: imagesStore
    }).render();
    /*------------------------图片上传插件配置  begin-----------------------*/
    var uploader = WebUploader.create({
        auto: true,
        swf: '${staticpath}/ueditor/third-party/webuploader/Uploader.swf',
        server: '${basepath}/rest/manage/ued/config?action=uploadimage',
        pick: '#imagesBtn',//绑定事件
        resize: false,
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png,'
        }
    });

    //上传成功后
    uploader.on('uploadSuccess', function (file, response) {
        uploader.removeFile(file);//删除缓存
        imagesStore.add(response);//给store赋值
        var imgStr = imagesStore.getResult();
        //将数据源store转化成字符串赋值给input
        var imgArr = new Array();               //图片保存到数组中
        for (var i = 0; i < imgStr.length; i++) {
            imgArr[i] = imgStr[i].url;
        }
        $("#picture").val(imgArr.join(","));
    });
    /*------------------------图片上传插件配置  end-----------------------*/
    /*--------------------------活动图片列表  end--------------------*/
    //查询全部店铺
    var pStore = new Store({
        url: '/rest/manage/store/selectAllList',
        autoLoad: true,
        root: 'data'
    });
    var sSelect;
    sSelect = new Select.Select({
        render: '#p-catalog',
        valueField: '#p-value',
        list: {
            itemTpl: '<li >{name}</li>',
            idField: 'id'
        },
        store: pStore
    }).render();
</script>

</@page.pageBase>